<template>
	<div>
		<KuaiJieRuKouVue />
		<StatisticsVue />
		<div class="YueZhangDan">
			<div class="YueZhangDan-common-layout">
				<el-container>
					<el-header class="YueZhangDan-Header">
						<div class="YueZhangDan-Header-1">月账单缴费率</div>
						<div class="YueZhangDan-Header-2">
							<el-select v-model="value" clearable placeholder="Select" style="width: 200px">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
							<el-date-picker v-model="value2" type="year" placeholder="Pick a year"
								style="width: 160px" />
						</div>
					</el-header>
					<el-main>
						<div id="main" style="width: 100%; height: 400px;"></div>
					</el-main>
				</el-container>
			</div>
		</div>
		<JiaoYiQingKuangVue />
		<OrderWorkZhanBiVue/>
		<TicketCompletionVue />
	</div>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from 'vue';
	import KuaiJieRuKouVue from './KuaiJieRuKou.vue';
	import StatisticsVue from './Statistics.vue';
	import JiaoYiQingKuangVue from './JiaoYiQingKuang.vue';
	import OrderWorkZhanBiVue from './OrderWorkZhanBi.vue';
	import TicketCompletionVue from './TicketCompletion.vue';
	import * as echarts from "echarts";
	import $http from '../router/AxiosApi';
	$http.post("/CostTongJi").then((res)=>{
		console.log("月账单",res.data.data)
	})
	const value = ref('全部')
	const options = [
		{
			value: 'Option1',
			label: 'Option1',
		},]
	const value2 = ref('2024')
	onMounted(() => {
	    var chartDom = document.getElementById('main');
	    var myChart = echarts.init(chartDom);
	    var option;
	
	    // 后端获取数据
	    $http.post("/CostTongJi").then((res) => {
	        console.log("月账单", res.data.data);
	        const data = res.data.data;
	
	        // 将数据转换成图表所需的格式
	        const months = [...new Set(data.map(item => item.month))]; // 这里只处理一个月的示例
	        const paidData = months.map(month => {
	            const item = data.find(d => d.cost_state === '已付款' && d.month === month);
	            return item ? parseFloat(item.count) : 0;
	        });
	        const unpaidData = months.map(month => {
	            const item = data.find(d => d.cost_state === '未付款' && d.month === month);
	            return item ? parseFloat(item.count) : 0;
	        });
	
	        const totalData = paidData.map((value, index) => value + unpaidData[index]);
	
	        const series = ['已交', '未交'].map((name, sid) => {
	            return {
	                name,
	                type: 'bar',
	                stack: 'total',
	                barWidth: '15%',
	                label: {
	                    show: true,
	                    formatter: function (params) {
	                        return params.value.toFixed(0); // 显示整数金额
	                    }
	                },
	                itemStyle: {
	                    color: sid === 0 ? '#00C36D' : '#E5F9F0'
	                },
	                data: sid === 0 ? paidData : unpaidData
	            };
	        });
	
	        option = {
	            tooltip: {
	                trigger: 'axis',
	                axisPointer: {
	                    type: 'shadow'
	                },
	                formatter: function (params) {
	                    let tooltipContent = params[0].name + '<br/>';
	
	                    params.forEach(function (item) {
	                        tooltipContent += item.marker + ' ' + item.seriesName + ': ' + item.value.toFixed(0) + '元<br/>';
	                        if (item.seriesName === '已交') {
	                            tooltipContent += '缴费率: ' + ((item.value / totalData[item.dataIndex]) * 100).toFixed(2) + '%<br/>';
	                        }
	                    });
	
	                    return tooltipContent;
	                }
	            },
	            legend: {
	                selectedMode: false
	            },
	            grid: {
	                left: 100,
	                right: 100,
	                top: 50,
	                bottom: 50
	            },
	            yAxis: {
	                type: 'value',
	                axisLabel: {
	                    formatter: '{value} 元'
	                }
	            },
	            xAxis: {
	                type: 'category',
	                data: months
	            },
	            series
	        };
	        
	        myChart.setOption(option);
	    });
	});
</script>

<style scoped>
	.YueZhangDan {
		width: 1390px;
		margin-top: 20px;
		margin-left: 10px;
		background-color: white;
		border-radius: 10px;
	}

	.YueZhangDan-common-layout {}

	.YueZhangDan-Header {
		height: 40px;
		display: flex;
		/* 使用flex布局 */
		justify-content: space-between;
		/* 左右对齐 */
		align-items: center;
		/* 垂直居中对齐 */
	}

	.YueZhangDan-Header-1 {
		font-weight: bold;
		line-height: 40px;
		float: left;
	}

	.YueZhangDan-Header-2 {
		float: right;
	}
</style>